<template>
    <el-form :model="form" :rules="rules" ref="userFormRef" label-width="80px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="账号名" prop="userName">
                    <el-input v-model="form.userName" placeholder="请输入昵称" maxlength="30" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="form.nickName" placeholder="请输入昵称" maxlength="30" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="手机号码" prop="mobile">
                    <el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="归属部门" prop="deptId">
                    <el-tree-select v-model="form.deptId" :data="depts"
                        :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id"
                        placeholder="请选择归属部门" check-strictly @change="onOrgChange" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="岗位" prop="postId">
                    <el-select v-model="form.postId" placeholder="请选择">
                        <el-option v-for="item in availPost" :key="item.id" :label="item.name" :value="item.id"
                            :disabled="!item.isActive"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="本地邮箱" prop="localEmail">
                    <el-radio-group v-model="form.localEmail">
                        <el-radio label="开通" :value="true" border />
                        <el-radio label="关闭" :value="false" border />
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <el-form-item label="用户性别" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择">
                        <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup>
import { listSysPost } from "@/api/system/syspost";
const form = defineModel({
    type: Object,
    default: {
        id: undefined,
        nickName: '',
        deptId: undefined,
        postId: undefined,
        localEmail: true,
        mobile: '',
        email: '',
        userName: '',
        gender: 0,
        remark: ''
    }
});

const availPost = ref([]);

const props = defineProps({
    depts: { type: Array }, default: [],
})

const userFormRef = ref();

// 表单验证规则
const rules = ref({
    userName: [
        { required: true, message: '请输入账号名', trigger: 'blur' },
        { max: 30, message: '账号名不能超过30个字符', trigger: 'blur' }
    ],
    nickName: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { max: 30, message: '昵称不能超过30个字符', trigger: 'blur' }
    ],
    deptId: [{ required: true, message: '请选择归属部门', trigger: 'change' }],
    mobile: [
        { required: false, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
    ],
    email: [
        { required: false, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
    ],
    localEmail: [
        { required: true, message: '请选择是否开通本地邮箱', trigger: 'blur' },
    ],
    userName: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
        { max: 30, message: '用户名称不能超过30个字符', trigger: 'blur' }
    ],
    // postId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
    remark: [{ max: 200, message: '备注不能超过200个字符', trigger: 'blur' }]
});


// 性别选项数据
const sys_user_sex = ref([
    { value: 0, label: '男' },
    { value: 1, label: '女' }
]);


const validate = () => {
    return userFormRef.value.validate();
}

const getAvaliPost = (orgId) => {
    let params = { pageSize: 999, orgId };
    listSysPost(params).then(({ result }) => {
        availPost.value = result;
    })
}

const onOrgChange = (val) => {
    form.value.postId = undefined;
    getAvaliPost(val);
}

defineExpose({ validate });

onMounted(() => {
    getAvaliPost(form.value.deptId);
})
</script>